<template>
    <div>
        <van-nav-bar title="选择咖啡钱包" left-arrow @click-left="onClickLeft" />

        <div class="box" v-for="(item,index) in lists.list" :key="index" >
            <div class="left"  >
                <div>￥{{item.money}}</div>
                <div>尚余{{item.coupon_num}}杯</div>
            </div>
            <div class="right">
                <div class="box3">
                    <div>{{item.coupon_name}}</div>
                    <div>期限：{{item.future_time}}-{{item.now_time}}</div>
                </div>
                <div class="btn" ><van-checkbox  @click.stop="btn" v-model="checked" icon-size="24px"></van-checkbox></div>
            </div>
          
        </div>

   

        <div class="bot">
            <van-button type="primary" block @click="Net"  >确认</van-button>
        </div>


    </div>
</template>

<script setup>
import { ref ,onMounted,computed} from 'vue';
import {useRouter} from 'vue-router'
import { useWallet } from '@/api/api'
let checked= ref(false)

const btn=()=>{
    checked.value!=checked.value
    console.log(1111111);
}
let uid= localStorage.getItem('userid')
let lists=ref([])
onMounted(()=>{
    useWallet({uId:uid}).then(res=>{
    
    lists.value=res
    console.log({res});
 })
})

const router=useRouter()
const onClickLeft = () => history.back('/use');
const onClickRight = () => showToast('按钮');

const Net=()=>{
    router.push('/coupon')
}


</script>

<style lang="scss" scoped>
.box {
    width: 90%;
    height: 100px;
    margin: 5%;
    display: flex;
    justify-content: space-around;
    background-color: white;
    border-radius: 5px;
.left{
  
    width: 100px;
    height: 100px;
    font-size: 16px;
}
.right{
    width: 250px;
    height: 100px;
   
    display: flex;
    justify-content: space-between;
   .box3{
    font-size: 14px;
    width: 200px;
    height: 100px;
   }
    .btn{
        width:30px ;
        height: 30px;
        margin-top: 33px;
        margin-right: 10px;
        border-radius: 50%;
      
        .van-icon{
            line-height: 30px;
            width:30px ;
        height: 30px;
        }
    }
 
}

}

.bot {
    width: 90%;
    height: 100px;
   margin: 5%;
   margin-bottom: 5px;
    position: fixed;
    top: 90%;
   text-align: center;


}
</style>